<template>
  <div class="mobile-honeycomb">
    <div v-fade-in class="title">合作伙伴</div>
    <M-button v-slide-up @click="goAbout" />
    <div class="honeycomb-container">
      <div
        v-for="(item, index) in honeycombData"
        :key="index"
        class="honeycomb-item"
        :class="{ 'has-data': item.hasData }"
        :style="getHoneycombStyle(item)"
      >
        <div v-slide-plus class="honeycomb-content">
          <img v-if="item.image" :src="publicSrc(item.image)" :alt="item.introduce" />
          <span v-else-if="item.introduce">{{ item.introduce }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});

const honeycombData = computed(() => {
  return generateHoneycombData(props.data || []);
});

const generateHoneycombData = (data: any[]) => {
  const rows = 8;
  const cols = 4; // 每行 4 个
  const total = rows * cols;

  // 初始化空位
  const result: any[] = Array.from({ length: total }, (_, i) => {
    const row = Math.floor(i / cols);
    const col = i % cols;
    return { introduce: "", image: "", row, col, hasData: false };
  });

  // 中心点（与视觉居中一致）
  const centerRow = Math.floor(rows / 2); // 4
  const centerCol = Math.floor(cols / 2); // 2

  // even-r 邻居
  const getNeighbors = (r: number, c: number) => {
    const evenRow = r % 2 === 0;
    const neighbors = evenRow
      ? [
          [0, -1],
          [0, 1],
          [-1, 0],
          [-1, 1],
          [1, 0],
          [1, 1],
        ]
      : [
          [0, -1],
          [0, 1],
          [-1, -1],
          [-1, 0],
          [1, -1],
          [1, 0],
        ];
    return neighbors
      .map(([dr, dc]) => [r + dr, c + dc])
      .filter(([nr, nc]) => nr >= 0 && nr < rows && nc >= 0 && nc < cols);
  };

  // BFS 从中心向外，得到填充顺序
  const visited = Array.from({ length: rows }, () => Array(cols).fill(false));
  const queue: Array<[number, number]> = [];
  const order: Array<[number, number]> = [];
  queue.push([centerRow, centerCol]);
  visited[centerRow][centerCol] = true;

  while (queue.length) {
    const [r, c] = queue.shift() as [number, number];
    order.push([r, c]);
    const neighbors = getNeighbors(r, c);
    for (const [nr, nc] of neighbors) {
      if (!visited[nr][nc]) {
        visited[nr][nc] = true;
        queue.push([nr, nc]);
      }
    }
  }

  // 写入数据
  let idx = 0;
  for (let i = 0; i < order.length && idx < data.length; i++) {
    const [r, c] = order[i];
    const index = r * cols + c;
    result[index] = { ...data[idx], row: r, col: c, hasData: true };
    idx++;
  }

  return result;
};

const hexConfig = {
  hexWidth: 68,
  hexHeight: 74,
  gap: 10,
};

const getHoneycombStyle = (item: any) => {
  const { hexWidth, hexHeight, gap } = hexConfig;
  const x = item.col * (hexWidth + gap);
  const y = item.row * (hexHeight * 0.75 + gap);
  const offsetX = item.row % 2 === 0 ? (hexWidth + gap) / 2 : 0;
  return { transform: `translate(${x + offsetX}px, ${y}px)` };
};

const goAbout = () => {
  router.push("/m/about");
};
</script>
<style lang="scss" scoped>
.mobile-honeycomb {
  width: 100%;
  height: 100vh;
  padding: 1.25rem;
  box-sizing: border-box;
  background: url("@/assets/home/carousel7.png") no-repeat;
  background-size: cover;
  position: relative;
  .title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-top: 30%;
  }
  :deep(.more-btn) {
    position: static;
    display: inline-flex;
    margin-top: 5%;
  }
  .honeycomb-container {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    width: min(92vw, 420px);
    height: 70vh;
  }
  .honeycomb-item {
    position: absolute;
    width: 68px;
    height: 74px;
    transition: all 0.3s ease;
    .honeycomb-content {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      img {
        width: 46px;
        height: 46px;
        object-fit: contain;
      }
      span {
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 1.1;
      }
    }
  }
}
</style>
